<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css"/>
<style type="text/css">
body{width:100%;height:100%;background:url(static/img/bg_login.jpg) 100% 100%}
.login{width:20%;top:30%;right:10%;padding:24px;position:fixed;background:rgba(0,0,0,0.7);border:1px solid rgba(150,150,150,0.7);display:flex;flex-wrap:wrap;align-content:flex-start;border-radius:5px}
.tt{display:flex;flex-wrap:wrap;color:#FFF;border-bottom:1px solid #333;padding-bottom:24px;margin-bottom:24px}
.tt div{width:100%;}
.tt .l1{font-size:44px;font-weight:lighter;}
.tt .l2{font-size:32px;font-weight:bolder;}
.unp{width:100%;padding:12px 0;margin-bottom:24px;background:rgba(0,0,0,0.7);border:1px solid rgba(200,200,200,0.2);display:flex;align-items:center}
.unp img{width:16px;height:16px;margin:0 16px}
.unp input{width:100%;height:100%;background:transparent;outline:none;color:#FFF;border:none;}
.unp input::after{outline:none}
.remember{color:#FFF;font-size:14px;display:flex;align-items:center}
.btn{width:100%;background:#4474F5;margin-top:24px;padding:8px 0;display:flex;justify-content:center;font-size:16px;color:#FFF;border-radius:5px;cursor:pointer}
</style>
</head>
<body>
<div class="login">
	<div class="tt">
		<div class="l1">武汉瑞亚海事</div>
		<div class="l2">招生培训管理系统</div>
	</div>
	<div class="unp">
		<img src="static/img/icon_login_1.png" >
		<input type="text" placeholder="请输入用户名..." />
	</div>
	<div class="unp">
		<img src="static/img/icon_login_2.png" >
		<input type="password" placeholder="请输入密码..." />
	</div>
	<div class="remember">
		<label for="remember"><input type="checkbox" name="remember"/>记住密码</label>
	</div>
	<a class="btn" href="main.html">登录</a>
</div>
</body>
</html>